<template>
  <div>
    <el-upload
      ref="upload"
      :action="upload.url"
      :headers="upload.headers"
      :file-list="upload.fileList"
      :multiple="true"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :limit="5"
      :on-exceed="exceedingMaximumLimit"
      :on-error="uploadError"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :on-remove="removeFile"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        :loading="upload.isUploading"
        @click="submitUpload"
        >上传到服务器
      </el-button>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    // fileObject: {
    //   type: Object,
    // },
  },
  data() {
    return {
      fileList: [],
      /**文件上传 */
      file: {
        fileUrls: [],
        fileName: [],
      },
      obj: {},
      //上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/purs/file/upload",
        // 上传的文件列表
        fileList: [],
        //上传成功列表
        fileSecuss: [],
      },
    };
  },

  methods: {
    /**文件 */
    //文件移除钩子
    removeFile(file, fileList) {
      console.log();
    },
    //文件删除之前的钩子
    beforeRemove(file, fileList, itme) {},
    //上传文件之前
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$modal.msgError("文件大小不可超过10MB");
      }
      return isLt2M;
    },
    //文件上传失败
    uploadError(err, file, fileList) {
      this.upload.isUploading = false;
      this.$modal.msgError(err);
    },
    exceedingMaximumLimit(file, fileList) {
      this.$modal.msgError("最多上传文件5个！！");
    },
    // 文件提交处理
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("res:" + JSON.stringify(this.response));

      this.obj = response;
      this.upload.isUploading = false;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
  },
};
</script>

<style>
</style>